<template>
    <div class="bloodExamination">
        <!-- 患者模糊查询 -->
        <el-row :gutter="20">
            <el-col :span="6" :offset="8">
                <div>
                    <el-input v-model="input" placeholder="请输患者名称" clearable></el-input>
                </div>
            </el-col>
            <el-col :span="4">
                
                <el-button type="success" @click="onSubmit">查询患者</el-button>
                
            </el-col>
            <el-col :span="4" :pull="2">
                
                <el-button type="primary" @click="refurbish">刷新</el-button>
                
            </el-col>
        </el-row>
        <br>
        <!-- 排队 -->
        <el-table :data="tableData" border style="width: 100%;"
            :header-cell-style="{textAlign: 'center',background:'#67C23A',color:'#303133'}"
            :cell-style="{ textAlign: 'center'}">
            <el-table-column fixed prop="sort" label="排序"></el-table-column>
            <el-table-column prop="patientName" label="姓名"></el-table-column>
            <el-table-column prop="itemName" label="检查项目"></el-table-column>
            <el-table-column fixed="right" label="操作">
                <template slot-scope="scope">
                    <el-button @click="callOut(scope.row)" size="small" type="success">叫号</el-button>
                    <el-button @click="checkTheNumber(scope.row)" size="small" type="warning">过号</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination background layout="prev, pager, next" :total="productData.total" :page-size="productData.size"
            :current-page="productData.current" @current-change="handleChange">
        </el-pagination>

        <!-- 叫号弹出信息 -->
        <el-dialog :data="patientMessage" title="详细信息" :visible.sync="dialogTableVisible">
            <el-descriptions :column="4" border position:sticky :contentStyle="{ textAlign: 'center'}">
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-user"></i>
                        姓名
                    </template>
                    {{this.patientMessage.patientName}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-postcard"></i>
                        身份证号
                    </template>
                    {{this.patientMessage.patientIdCard}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-female"></i>
                        性别
                    </template>
                    {{this.patientMessage.patientGender}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-present"></i>
                        年龄
                    </template>
                    {{this.patientMessage.patientAge}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-s-custom"></i>
                        医生
                    </template>
                    {{this.patientMessage.doctorName}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-mobile-phone"></i>
                        医生电话
                    </template>
                    {{this.patientMessage.doctorTel}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-tickets"></i>
                        检查项目
                    </template>
                    {{this.patientMessage.itemName}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-s-home"></i>
                        科室
                    </template>
                    {{this.patientMessage.depName}}
                </el-descriptions-item>
                <template slot="extra">
                    <el-button type="primary" size="small" @click="isInspect(patientMessage)">检查</el-button>
                    <el-button type="primary" size="small" @click="cancelTheCheck">取消</el-button>
                </template>
            </el-descriptions>   
        </el-dialog>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                // 出入框
                input: "",
                // 叫号弹出框控制
                dialogTableVisible: false,
                // 页面进入即加载数据
                tableData: [],
                // 患者详细信息
                patientMessage: {

                },
                // 分页参数
                productData: {
                    total: 10,
                    size: 8,
                    current: 1
                },
            }
        },
        methods: {
            //待检查患者排序函数
            query() {
                this.$http.get("http://localhost:8088/findInspect", {
                    params: {
                        current: this.productData.current //携带当前页数据
                    }
                }).then(res => {
                    console.log("待检查后端返回结果：")
                    console.log(res)
                    if (res.data.success) {
                        //3. 查询，返回分页相关数据，赋值给pageData
                        Object.assign(this.productData, res.data.data)
                        this.tableData = res.data.data.records;
                        // this.$message({
                        //     type: 'success',
                        //     // message: '成功' + res.data.message
                        // })
                    } else {
                        this.$message({
                            type: 'error',
                            message: '错误' + res.data.message
                        })
                    }
                }).catch(err => {
                    console.error(err)
                })
            },
            // 查询按钮
            onSubmit() {
                // 将查询出来的数据直接交给加载数据页面
                console.log('查询患者');
                this.$http.get("http://localhost:8088/findInspectByPatientName", {
                    params: {
                        patientName:this.input
                    }
                }).then(res => {
                    console.log("根据姓名查询检查项目后端返回结果：")
                    console.log(res)
                    if (res.data.success) {
                        this.tableData = res.data.data;
                        // this.$message({
                        //     type: 'success',
                        //     // message: '成功' + res.data.message
                        // })
                    } else {
                        this.$message({
                            type: 'error',
                            message: '错误' + res.data.message
                        })
                    }
                }).catch(err => {
                    console.error(err)
                })
            },
            
            // 刷新按钮
            refurbish(){
                this.query();
            },
            // 分页按钮
            handleChange(data) {
                console.log("当前页面：");
                console.log(data);
                //5.修改当前页，并且发起新的查询
                this.productData.current = data;
                this.query();
            },
            // 叫号操作
            callOut(row) {
                this.dialogTableVisible = true,
                    console.log("叫号")
                    console.log('检查详情表ID：')
                    console.log(row.checkDetailId)
                // inspectShoutByCheckDetailId 根据检查详情表ID查询当前患者详细信息 
                this.$http.get("http://localhost:8088/inspectShoutByCheckDetailId", {
                    params: {
                        checkDetailId: row.checkDetailId
                    }
                }).then(res => {
                    console.log("当前检查患者详细：")
                    console.log(res)
                    if (res.data.success) {
                        //将后端查出数据赋值给patientMessage
                        this.patientMessage = res.data.data;
                        //携带当前患者病历ID
                        this.patientMessage.caseId = row.caseId;
                        //携带当前患者检查详情id
                        this.patientMessage.checkDetailId=row.checkDetailId;
                    } else {
                        this.$message({
                            type: 'error',
                            message: '错误' + res.data.message
                        })
                    }
                }).catch(err => {
                    // console.error(err)
                })

            },
            // 过号操作
            checkTheNumber(row) {
                console.log("过号携带参数：")
                console.log(row)
                console.log(row.checkId)
                //checkTheNumber 根据检查详情表修改 记录修改时间，进行重新排队
                this.$http.post("http://localhost:8088/checkTheNumber",{
                    
                    checkId : row.checkId
                    
                }).then(res=>{
                    if(res.data.success){
                        this.$message({
                            type:'success',
                            message:'成功！重新排队！'
                        })
                        //重新查询数据库
                        this.query();
                    }else{
                        this.$message({
                            type:'error',
                            message:'错误！排队失败！'
                        })
                    }
                }).catch(err=>{
                    console.log(err)
                })
            },
            // 检查按钮
            isInspect(row) {
                console.log('检查项目ID：')
                console.log(row.itemId)
                //根据不同的检查跳转到不同过的检查页面
                switch(row.itemId){
                    case 1: //血常规检查
                        this.$router.push({                     
                            name:'RoutineBloodTest',
                            params:{newRow:row}
                        })
                        break;
                    case 2: //尿常规检查                   
                        this.$router.push({                     
                            name:'RoutineUrineTest',
                            params:{newRow:row}
                        })
                        break;    
                    case 3: //X光透析                    
                        this.$router.push({                     
                            name:'Iconography',
                            params:{newRow:row}
                        })
                        break;
                    case 4: //CT平扫                    
                        this.$router.push({                     
                            name:'Iconography',
                            params:{newRow:row}
                        })
                        break;
                    case 5: //彩超 
                        this.$router.push({                     
                            name:'Iconography',
                            params:{newRow:row}
                        })
                        break;
                    default:
                        this.$router.push("bloodExamination")
                }
                this.query();
            },
            //取消按钮
            cancelTheCheck(){
                this.dialogTableVisible=false;
            },
        },
        // 页面加载即查询所有需要查询的待检查病人
        mounted() {
            this.query();
        }
    }
</script>

<style>



</style>